<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html style="display: block;">
<head>
<title>系统登录</title>
<meta charset="UTF-8">
<link rel="icon" href="${rc.getContextPath()}/manage/images/favicon.ico" type="image/x-icon" />
<link rel="shortcut icon" href="${rc.getContextPath()}/manage/images/favicon.ico" type="image/x-icon" />
<script src="${rc.getContextPath()}/manage/styles/dwz/js/jquery-1.7.2.js"></script>
<script src="${rc.getContextPath()}/manage/styles/dwz/js/jquery.cookie.js"></script>
<script src="${rc.getContextPath()}/manage/js/jquery.enplaceholder.js"></script>
<style type="text/css">
input:-webkit-autofill {
    -webkit-box-shadow: 0 0 0px 1000px white inset;
}

* {
    margin: 0;
    padding: 0;
}

html {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    padding: 64px 0;
    overflow: auto;
}

html,body {
    height: 100%;
    font: 12px/1.5 Tahoma, Helvetica, Arial, Microsoft YaHei, sans-serif;
}

.header {
    width: 100%;
    height: 64px;
    overflow: hidden;
    background: #ffffff;
    position: relative;
    top: -64px;
}

.header-contianer {
    width: 1024px;
    height: 100%;
    margin: auto;
    position: relative;
    top: 17px;
    left: 15px;
}

.main {
    width: 100%;
    height: 100%;
    position: relative;
    min-height: 480px;
    max-height: 900px;
    min-width: 1000px;
    top: -64px;
    background: url('${rc.getContextPath()}/manage/images/login/login-bg.png')
        repeat center 0;
}

.footer {
    top: -64px;
    position: relative;
    width: 100%;
    bottom: 0px;
    height: 64px;
    text-align: center;
    color: #adadad;
    background: #ffffff;
    margin: 0;
    padding: 0;
}

.footer-text {
    position: absolute;
    top: 50%;
    height: 50px;
    margin-top: -18px;
    text-align: center;
    width: 100%;
}

@media ( min-width : 1280px) {
    .back {
        width: 100%;
        height: 100%;
        position: absolute;
        left: 0;
        top: 0;
        background-size: contain;
        background: url('${rc.getContextPath()}/manage/images/login/login-bgimg-l.png')
            no-repeat center 0;
    }
}

@media ( min-width : 768px) and (max-width: 1199px) {
    .back {
        width: 100%;
        height: 100%;
        position: absolute;
        left: 0;
        top: 0;
        background-size: contain;
        background: url('${rc.getContextPath()}/manage/images/login/login-bgimg-s.png')
            no-repeat center 0;
    }
}

.login-contianer {
    width: 1024px;
    height: 100%;
    position: relative;
    margin: auto;
}

.img-contianer {
    float: left;
    position: absolute;
    top: 50%;
    left: 50%;
    margin: -200px 0 0 -500px;
}

.img-contianer img {
    width: 461px;
    height: 400px;
}

.loginBox {
    position: absolute;
    top: 50%;
    left: 50%;
    padding: 20px 20px 0px 20px;
    margin: -190px 0 0 100px;
    float: right;
    background: #ffffff;
    color: #888888;
    width: 280px;
    height: 360px;
    border-radius: 10px;
    overflow: hidden;
    z-index: 1;
}

.loginBox ul {
    margin-top: 20px;
}

.loginBox li {
    position: relative;
    height: 38px;
    width: 298px;
    margin-bottom: 15px;
}

.loginBox li span {
    display: block;
    position: absolute;
    left: 12px;
    top: 50%;
    margin-top: -8px;
    width: 18px;
    height: 18px;
}

.inputcls {
    border-top: 0;
    border-left: 0;
    border-right: 0;
    border-bottom: 1px solid #ecf0f1;
    height: 23px;
    width: 210px;
    padding: 6px 30px 6px 38px;
    line-height: 26px;
    font-family: "宋体";
    color: #333;
    font-size: 14px;
}

input:focus {
    outline: none;
    border-bottom: #87C6F9 1px solid;
    box-shadow: 0 0 8px rgba(103, 166, 217, 1);
}

input:required {
    outline: none;
    border-bottom: red 1px solid;
}

ul,li {
    list-style: none;
}

.siteIcon span {
    background: url('${rc.getContextPath()}/manage/images/login/login-company.png')
        no-repeat center 0;
}

.userNameIcon span {
    background: url('${rc.getContextPath()}/manage/images/login/login-user.png')
        no-repeat center 0;
}

.passwordIcon  span {
    background:
        url('${rc.getContextPath()}/manage/images/login/login-password.png')
        no-repeat center 0;
}

.languageIcon  span {
    background:
        url('${rc.getContextPath()}/manage/images/login/login-language.png')
        no-repeat center 0;
}

.loginTitle {
    font-family: "微软雅黑";
    color: #32a1da;
    font-size: 17px;
    margin-left: 12px;
}

.tips {
    margin-left: 10px;
    color: red;
}

.loginBtn {
    margin-top: 20px;
    margin-bottom: 8px;
    width: 283px;
    height: 40px;
    background: #7cd41e;
    border: none;
    font-size: 16px;
    color: #ffffff;
    border-radius: 5px;
    font-family: "微软雅黑";
}

.loginBtn:hover {
    background: #70bf1b;
}

#dropdown {
    border-top: 0;
    border-left: 0;
    border-right: 0;
    border-bottom: 1px solid #ecf0f1;
    height: 25px;
    width: 230px;
    padding: 6px 10px 6px 38px;
    line-height: 26px;
    font-family: "宋体";
    color: #333;
    font-size: 14px;
}

.placeholder {
    color: #ACA899;
}

.select_wrapper {
    background: #ffffff
        url('${rc.getContextPath()}/manage/images/login/login-arrow.png') no-repeat
        top 15px right 8px;
    border-top: 0;
    border-left: 0;
    border-right: 0;
    border-bottom: 1px solid #ecf0f1;
    height: 25px;
    width: 230px;
    padding: 6px 10px 6px 38px;
    line-height: 26px;
}

.select_wrapper:hover {
    outline: none;
    border-bottom: #87C6F9 1px solid;
    box-shadow: 0 0 8px rgba(103, 166, 217, 1);
}

.select_wrapper span {
    background: none;
    display: block;
    margin: 15px 30px 0 15px;
    font-family: "宋体";
    color: #333;
    font-size: 14px;
    line-height: 15px;
    padding-left: 10px;
    text-overflow: ellipsis; 
    overflow: hidden; 
    max-width: 222px;
    white-space: nowrap;
}

.select_wrapper .select_inner {
    background: #fff;
    border-radius: 5px;
    box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.3);
    color: #687278;
    display: none;
    position: absolute;
    left: 35px;
    top: 20px;
    width: 240px;
    z-index: 300;
    max-height: 110px;
    overflow-y: auto;
    overflow-x: hidden;
}

.select_wrapper .select_inner li {
    border-bottom: 1px solid #eee;
    padding: 0 15px;
    height: 30px;
    width: 210px;
    margin-bottom: 5px;
    font-size: 13px;
}

.select_wrapper .select_inner li:hover {
    background: #eee;
}

.select_wrapper .select_inner li:last-child {
    border: none;
    border-radius: 0 0 5px 5px;
}

.select_wrapper .select_inner li:first-child {
    border-radius: 5px 5px 0 0;
}
</style>
</head>
<body>
    <div class="header">
        <div class="header-contianer">
            <a href="#" target="" title="IME"> <img border="0" src="${rc.getContextPath()}/manage/images/login/login-logo.png" alt="IME">
            </a>
        </div>
    </div>
    <div class="main">
        <div class="back"></div>
        <div class="login-contianer">
            <div class="img-contianer">
                <img src="${rc.getContextPath()}/manage/images/login/login-img.png">
            </div>
            <div class="loginBox">
                <form action="${rc.getContextPath()}/manage/doLogin" id="login_form" method="post">
                    <input name="username" type="hidden" /> <label class="loginTitle">用户登录</label> <label class="tips"><#if message??>*${message!''}</#if></label>
                    <input id="j_siteCode" name="siteCode" type="hidden" placeholder="工厂代码" value="1001"/>
                    <ul>
                        <!--<li class="siteIcon"><span></span> <input id="j_siteCode" name="siteCode" type="text" class="inputcls in" placeholder="工厂代码" value="">
                        </li>-->
                        <li class="userNameIcon"><span></span> <input name="name" id="j_username" type="text" class="inputcls in" placeholder="用户名">
                        </li>
                        <li class="passwordIcon"><span></span> <input id="j_password" name="password" type="password" class="inputcls in" name="password" placeholder="密码">
                        </li>
                        <li class="languageIcon" id="dp"><span></span> <select class="selectbox in" name="languageCode" value="${defaultLanguage!'zh'}"> <#if languages??><#list languages as lg>
                                <option value="${lg.languageCode!''}">${lg.languageName!''}</option> </#list></#if>
                        </select>
                        </li>
                    </ul>
                    <div class="loginBtnArea">
                        <input type="submit" id="login_ok" class="loginBtn" value="立即登录"> <span></span>
                    </div>
                </form>
            </div>
        </div>
    </div>
    <div class="footer">
        <div class="footer-text">
            <p>联系电话：xxx 邮箱：xxx</p>
            <p>Copyright © 2017-2020 b.sky,inc. xxxx公司版权所有，保留所有权利。</p>
        </div>
    </div>
</body>
</html>
<script type="text/javascript">
    $(function() {
        $('body').bind('click', function(e) {
            var target = $(e.target);

            if (target.closest(".select_wrapper").length == 0) {

                var ul = $(".select_inner");
                ul.css("display", "none");
            }
        });

        var language = "zh";

        $('.selectbox').wrap('<div class="select_wrapper"></div>')
        $('.selectbox').parent().prepend(
                '<span>' + $(this).find(':selected').text() + '</span>');
        $('.selectbox').parent().children('span')
                .width($('.selectbox').width());
        $('.selectbox').css('display', 'none');
        $('.selectbox').parent().append('<ul class="select_inner"></ul>');
        $('.selectbox').children().each(
                function() {
                    var opttext = $(this).text();
                    var optval = $(this).val();
                    $('.selectbox').parent().children('.select_inner').append(
                            '<li id="' + optval + '">' + opttext + '</li>');
                });

        $('.selectbox').parent().find('li').on(
                'click',
                function() {
                    var cur = $(this).attr('id');
                    $('.selectbox').parent().children('span').text(
                            $(this).text());
                    $('.selectbox').children().removeAttr('selected');
                    $('.selectbox').children('[value="' + cur + '"]').attr(
                            'selected', 'selected');
                    language = $('.selectbox')
                            .children('[value="' + cur + '"]').val();
                }).click();

        $('.selectbox').parent().on('click', function() {
            $(this).find('ul').slideToggle('fast');
        });

        $('input, textarea').placeholder();
        $('#j_password').placeholder();

        $("#j_siteCode").focus();

        $("#login_form").submit(function() {
            var issubmit = true;
            var i_index = -1;
            $(this).find('.in').each(function(i) {
                if ($(this).val() == $(this)
                        .attr("placeholder")) {
                    $(this).css('border-bottom',
                            '1px #ff0000 solid');
                }
                if ($.trim($(this).val()).length == 0) {
                    $(this).css('border-bottom',
                            '1px #ff0000 solid');
                    issubmit = false;
                    if (i_index == -1)
                        i_index = i;
                } else {
                    if (!($(this).val() == $(this).attr(
                            "placeholder"))) {
                        $(this).css('border-bottom',
                                '1px #ecf0f1 solid');
                    }
                }
            });
            if (language.length == 0) {
                issubmit = false;
                $(".select_wrapper").css('border-bottom',
                        '1px #ff0000 solid');
            } else {
                $(".select_wrapper").css('border-bottom',
                        '1px #ecf0f1 solid');
            }
            if (!issubmit) {
                $(this).find('.in').eq(i_index).focus();
                return false;
            }
            var siteCode = $("input[name='siteCode']").val();
            var username = $("input[name='name']").val();
            $("input[name='username']").val(
                    username + "_" + siteCode + "_" + $('.selectbox.in')[0].value);
            $("#login_ok").attr("disabled", true).val('登陆中..');
            return true;
        });
        sessionStorage.clear();
    });
</script>
